<!-- 章列表 组件 -->

<template>
	<view>
		
		<!-- 课程目录文字 -->
		<focus-box width="750" height="88" :padding="[0,32]" bg="white"
		mode="row" justify="start" align="center">
			<!-- 竖线 -->
			<focus-box width="5" height="28" bg="primary"></focus-box>
			<focus-box width="16" height="10"></focus-box>
			<!-- 文字 -->
			<focus-text size="30" color="black" weight="bold" text="课程目录"></focus-text>
		</focus-box>
		
		<!-- 章信息块 -->
		<focus-box v-for="(item,index) in zhang.list" :key="item.key"
		width="750" bg="white"
		mode="col" justify="start" align="center">
			
			<!-- 顶部间隔线 -->
			<focus-line v-if="index>0" mode="dashed" length="686" color="info-light"></focus-line>
			
			<!-- 章信息容器 -->
			<focus-box 
				width="750" 
				:padding="[34,32]" 
				bg="white" 
				bgscheme="hover"
				mode="row" 
				justify="between" 
				align="center" 
				@click="chapterClick(index)"
			>
				<!-- 文字信息块 -->
				<focus-box 
					width="630" 
					mode="col" 
					justify="center" 
					align="start"
				>
					<!-- 章标题 -->
					
					<view style="position: relative;width: 630rpx;">
						<view style="width: 530rpx;">
							<focus-text 
								size="30" 
								color="content" 
								weight="bold" 
								lines="2" 
								:text="item.number+' '+item.title"
							></focus-text>
						</view>
						
						<!-- 必修选修 -->
						<view style="position: absolute;right: 0rpx;top: 0rpx;width: 100rpx;">
							<u-tag  
							:text="item.isMust?'必修':'选修'" 
							:type="item.isMust?'error':'success'" 
							style="margin: 0 0 0 20rpx;" 
							size="mini">
							</u-tag>
						</view>
						
					</view>
					
					
					
					<!-- 中间间隔 -->
					<focus-box width="100" height="23"></focus-box>
					<!-- 学习进度 -->
					<focus-box mode="row" justify="start" align="center">
						<focus-text size="26" color="remark" text="已学"></focus-text>
						<focus-text size="26" color="error" :text="item.section_had+'/'+item.section_total"></focus-text>
						<focus-text size="26" color="remark" text="小节，已获得"></focus-text>
						<focus-text size="26" color="error" :text="item.score_had+'/'+item.score_total"></focus-text>
						<focus-text size="26" color="remark" text="学时"></focus-text>
					</focus-box>
				</focus-box>
				
				<!-- 展开按钮 -->
				<focus-box width="40" height="40" mode="col" justify="center" align="center">
					<!-- 上箭头(已展开)图标 -->
					<focus-icon v-if="item.isUnfold" name="fi-up" size="30" color="info"></focus-icon>
					<!-- 下箭头(未展开)图标 -->
					<focus-icon v-else name="fi-down" size="30" color="info"></focus-icon>
				</focus-box>
				
			</focus-box>
			
			
			<!-- 小节列表容器 -->
			<focus-box 
				v-if="item.isUnfold == true && item.section.length > 0"
				mode="col" 
				bg="#F4F6F8"
				align="center" 
				justify="start" 
				width="750" :padding="[0,0,20,0]"
			>
				<!-- 小节item信息容器 -->
				<view 
					v-for="(item2) in item.section" 
					class="course-details-chapter-item-box"
					:key="item2.key"
					:class="item2.isViewing ? 'course-details-chapter-item-box-check' : 'course-details-chapter-item-box-normol'"
					@click="sectionClick(item2)"
				>
					
					<!-- 文字信息块 -->
					<focus-box 
						width="480"
						mode="col" 
						justify="center" 
						align="start"
						:style="item2.state === 0 ? 'opacity: 0.5;' : ''"
					>
						<!-- 小节标题 -->
						<focus-box mode="row" justify="start" align="center">
							<!-- 正在播放图标容器 -->
							<focus-box v-if="item2.isViewing && isplaying"
							mode="row" align="center">
								<image style="width:30rpx; height:30rpx;" src="@/pagesB/static/img/course/playNow.gif"></image>
								<focus-box width="16" height="10"></focus-box>
							</focus-box>
							<!-- 小节标题文字 -->
							<focus-text size="30" color="content" lines="1" weight="bold" :text="item2.number+' '+item2.title"></focus-text>
						</focus-box>
						<!-- 中间间隔 -->
						<focus-box width="100" height="23"></focus-box>
						<!-- 学习进度 -->
						<focus-box mode="row" justify="start" align="center">
							<!-- 视频时长 -->
							<image style="width:32rpx; height:32rpx;" src="@/pagesB/static/img/course/duration.png"></image>
							<focus-box width="14" height="10"></focus-box>
							<focus-text size="26" color="remark" :text="item2.videoLength"></focus-text>
							<!-- 中间间隔 -->
							<focus-box width="24" height="20"></focus-box>
							<!-- 小节学分 -->
							<focus-text size="26" color="error" :text="item2.score_had+'/'+item2.score_total"></focus-text>
							<focus-text size="26" color="remark" text="学时"></focus-text>
							<!-- 中间间隔 -->
							<focus-box width="24" height="20"></focus-box>
							<!-- 学习进度 -->
							<focus-text v-if="item2.isViewing&&item2.baifen<100" size="26" color="primary" text="正在学习"></focus-text>
							<focus-text v-else-if="item2.baifen>=100" size="26" color="success" :text="'已学'+item2.baifen+'%'"></focus-text>
							<focus-text v-else size="26" color="remark" :text="'已学'+item2.baifen+'%'"></focus-text>
						</focus-box>
					</focus-box>
					
					<!-- 课后习题按钮 -->
					<focus-box width="150" mode="col" justify="center" align="end">
						
						<!-- 待测验 -->
						<focus-box v-if="item2.status_exam==1"
						width="140" height="60"
						mode="row" justify="center" align="center"
						radius="30" bg="primary"
						bubble="false"
						@click="examBtnClick(item2)">
							<focus-text size="24" color="white" text="去做题"></focus-text>
						</focus-box>
						
						<!-- 已通过 -->
						<focus-box v-else-if="item2.status_exam==2"
						width="140" height="60"
						mode="row" justify="center" align="center"
						border="success" radius="30"
						bg="success" bgscheme="light"
						bubble="false"
						@click="examBtnClick(item2)">
							<focus-text size="24" color="success" text="已通过"></focus-text>
						</focus-box>
						
						<!-- 未通过 -->
						<focus-box v-else-if="item2.status_exam==3"
						width="140" height="60"
						mode="row" justify="center" align="center"
						border="error" radius="30"
						bg="error" bgscheme="light"
						bubble="false"
						@click="examBtnClick(item2)">
							<focus-text size="24" color="error" text="未通过"></focus-text>
						</focus-box>
						
					</focus-box>
					
				</view>
				
			</focus-box>
			
			
		</focus-box>
		
	</view>
</template>


<script>
	// 接口请求文件
	import request from '@/pagesB/common/js/request/course.js'; // 课程信息 相关接口
	
	/**
	 * 章节列表组件
	 * @description 章列表组件，杜先生开发
	 * @property {String} tag 组件标识，默认：list-chapter
	 * @property {String,Number} send 页面传递参数对象
	 * @property {Boolean} isplaying 视频播放器是否正在播放中
	 * @event {Function()} basicinfo 课程基本信息回调
	 * @event {Function()} change 切换选中小节
	 */
	export default {
		name: 'list-chapter',
		props: {
			tag: { type: String, default: 'list-chapter' },
			send: { type: Object, default: ()=>{ return {}; } },
			isplaying: { type: Boolean, default: false },
		},
		
		// 页面数据
		data() {
			return {
				// 状态信息
				state: {
					chapterFirst: true, // 章节列表接口是否是第一次请求
				},
				// 定时器对象
				timer: {
					videoInfo: null, // 获取视频资源信息
				},
				// 章数据信息
				zhang: {
					// 章列表数组
					list: [],
					// 当前选中的小节对象
					checkJie: {},
				},
				jieId:0,
				//弹框
				// video:{},
				// jieInfo:{}
			}
		},
		
		// 数据监听
		watch: {
			// 页面传参 改变了
			"send.over": {
				handler(newVal, oldVal){
					// 如果id有效，请求接口
					if (newVal==true || newVal=='true') { this.chapterListReq()}
				},
				immediate: true, // 刷新加载 立马触发一次handler
			}
		},
		
		// 组件销毁
		beforeDestroy() {
			// 销毁定时器
			if (this.timer.videoInfo) { clearTimeout(this.timer.videoInfo); }
		},
		
		// 页面事件
		methods: {
			// ============================================= 父级$refs事件
			// 更新选中小节的播放进度，参数：progressC-要更新的进度值
			updataJiePeogress(progressC) {
				// 只有小节还未到100%，才执行
				if (this.zhang.checkJie.baifen < 100){
					// 百分比进度值 赋值
					this.zhang.checkJie.baifen = progressC;
				}
			},
			// ============================================= 元素事件
			// 章信息块 点击
			chapterClick(indexC) {
				// 获取此章对象
				var item_chapt = this.zhang.list[indexC];
				// 如果章已经展开
				if (item_chapt.isUnfold == true){
					// 将其收拢
					item_chapt.isUnfold = false;
				}
				// 如果章没有展开
				else {
					// 将其收拢
					item_chapt.isUnfold = true;
				}
			},
			
			// 小节信息块 点击，参数：itemC-点击的小节对象  isSureDeal-是否一定执行
			sectionClick(itemC, isSureDeal) {
				// 小节状态有效并且还未在看，才执行
				if ((itemC.state == 1 && itemC.isViewing != true) || isSureDeal === true){
					// 进行一次change方法 回父
					this.$emit('change', {
						tag: this.tag, // 组件标识
						type: 'reset', // 处理类型：reset-重置  video-视频
					});
					//视频播放回调有延迟这里做个延迟
					setTimeout(() =>{
						// 将所有小节标记为“未在看”
						for (let i = 0; i < this.zhang.list.length; i++){
							// 节点 - 一个章对象
							let ele_zhang = this.zhang.list[i];
							// 循环下面的节列表
							for (let j = 0; j < ele_zhang.section.length; j++){
								// 节点 - 一个小节对象
								let ele_jie = ele_zhang.section[j];
								// 将小节标记为“未在看”
								ele_jie.isViewing = false;
							}
						}
						// 将当前小节标记为“正在看”
						itemC.isViewing = true;
						this.jieId = itemC.jieId
						uni.$emit("changeJieId",this.jieId)
						// 当前选中小节对象 赋值
						this.zhang.checkJie = itemC;
						// 视频资源请求
						this.videoGetReq(itemC, (res)=>{
							// 播放器配置信息 封装
							var conf_video = {
								src: res.url, // 视频资源地址
								jump: 0, // 初始要跳转到的秒数
								openplay: true, // 是否开启播放功能
								openlegal: true, // 是否检测观看合法性
								articulationList: res.articulationList // 清晰度列表
							};
							// 如果视频已经看完了，不在检测合法性
							if (itemC.baifen >= 100) {
								conf_video.openlegal = false; 
							}else {// 没看完，那么赋值初始跳转秒数
								conf_video.jump = itemC.second; 
							}
							//弹框显示
							// this.video = conf_video
							// this.jieInfo = itemC
							// 进行一次change方法 回父
							setTimeout(()=>{
								this.$emit('change', {
									tag: this.tag, // 组件标识
									type: 'video', // 处理类型：reset-重置  video-视频
									jieInfo: itemC, // 小节信息
									video: conf_video, // 播放器配置
								});
							})
							
						});
					},500)
					
				}
				// 否则错误提示
				else if (itemC.state == 0){
					uni.showToast({
						title: '小节正在更新中',
						icon: 'none',
						duration: 1500
					});
				}
				
			},
			
			// 课后练习题按钮 点击
			examBtnClick(itemC) {
				//如果已经通过了||未通过
				if (itemC.status_exam == 2 || itemC.status_exam == 3){
					// 跳转到考试结果页面
					uni.$focus.pageJump('/pagesB/pages/question/result/index', {
						courseId: itemC.courseId, // 课程id
						jieId: itemC.jieId, // 小节id
						juanId: itemC.juanId, // 试卷id
						from: 'details', // 来源父页面
						term_id: this.send.term_id,
						cert_id: this.send.cert_id,
						item_type: this.send.item_type,
					});
				}else {// 其它情况下
					// 跳转到考试页面
					uni.$focus.pageJump('/pagesB/pages/question/test/index', {
						courseId: itemC.courseId, // 课程id
						jieId: itemC.jieId, // 小节id
						term_id: this.send.term_id,
						cert_id: this.send.cert_id,
						item_type: this.send.item_type,
					});
				}
				
			},
			
			
			// ============================================= 接口请求
			// 课程详情章节列表
			chapterListReq(type) {
				// 课程章列表 接口请求
				let send = { ...this.send }
				if(type === '1'){
					send.jieId = this.jieId
				}
				request.chapterList({
					urlData: {
						id: this.send.courseId, // 课程id
					},
					data: {
						teach_chapter_id: !(type==='1') ? this.send.jieId : this.jieId, // 小节id
					},
					send,
					success: (res) => {
						// 章列表数据 赋值
						this.zhang.list = res.list;
						// 如果是第一次请求
						if (this.state.chapterFirst == true){
							// 标记为“不是第一次了”
							this.state.chapterFirst = false;
							// 课程基本信息 回父
							this.$emit('basicinfo', {
								"tag": this.tag,
								"info": res.info,
							});
							// 如果存在初始播放小节
							if (res.firstPlay) {
								// 模拟一次点击小节操作
								this.sectionClick(res.firstPlay, true);
							}
						}
						
						
						//弹框
						// this.$emit('change', {
						// 	tag: this.tag, // 组件标识
						// 	type: 'video', // 处理类型：reset-重置  video-视频
						// 	jieInfo: this.zhang.list.map(item => item.section).flat().filter(itm => itm.jieId === this.jieInfo.jieId)[0], // 小节信息
						// 	video: this.video, // 播放器配置
						// });
						// uni.$emit('myModalInfoDjy')
						
					},
				});
			},
			
			// 视频资源请求，参数：jieC-点击的小节对象
			videoGetReq(jieC, callback) {
				// 如果已经存在定时器
				if (this.timer.videoInfo) { clearTimeout(this.timer.videoInfo); }
				// 重新定义定时器
				this.timer.videoInfo = setTimeout(() => {
					
					var obj_video = {
						url: '', // 视频播放地址
						articulationList: '' // 清晰度列表
					};
					var fun_call = () => {
						// 数据有效性判断
						if (obj_video.url){
							// 执行回调方法
							if (callback) { callback(obj_video); }
						}
					};
					if(jieC.videoId) {
						// 视频请求 接口请求
						// request.videoGet({
						// 	urlData: {
						// 		videoid: jieC.videoId, // 视频id
						// 	},
						// 	success: (res) => {
						// 		// 视频信息 赋值
						// 		obj_video.url = res.url;
						// 		// 成功回调
						// 		fun_call();
						// 	},
						// });
						// 获取视频清晰度列表
						request.getArticulationList({
							urlData: {
								videoid: jieC.videoId, // 视频id
							},
							success: (res) => {
								// 视频信息 赋值
								obj_video.url = res[0].PlayURL
								obj_video.articulationList = res;
								// 成功回调
								fun_call();
							},
						});
					}else {
						// 视频信息 赋值
						obj_video.url = jieC.videoSrc;
						// 成功回调
						fun_call();
					}
				}, 800);
			},
			
		},
		
	}
</script>


<style>
	/* 小节item信息容器 */
	.course-details-chapter-item-box{
		width: 702rpx;
		padding: 34rpx 32rpx; margin-top: 20rpx;
		display: flex; flex-direction: row; justify-content: space-between; align-items: center;
		border-radius: 12rpx;
	}
	/* 普通状态 */
	.course-details-chapter-item-box-normol{ background-color: white; }
	/* 选中状态 */
	.course-details-chapter-item-box-check{
		border: 1px solid #4A87FD;
		background-image: linear-gradient(180deg, rgba(74, 160, 253, 0.19) 0%, rgba(146, 193, 255, 0) 100%);
	}
</style>